<!--
 * @FileDescription: 白天模式与深色模式的切换
 * @Author: Nevertheless
 * @Date: 2025.4.4
 * @LastEditors: Nevertheless
 * @LastEditTime: 2025.4.26
 -->


<script setup>
import {ref} from "vue";
import {useThemeStore} from '@/stores/theme.js'

/**
 * 变量初始化
 * */
const dayOrNight = ref(false);
const baseColor = "#232323";
const contrastColor = "#FFFFFF";
const themeStore = useThemeStore();

/**
 * @description: 改变背景颜色
 * */
const changeBackground = () => {
  if (dayOrNight.value) {
    console.log("切换至夜晚");
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color-contrast', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-font-color', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('$global-font-color-contrast', baseColor);
    themeStore.toggleTheme();
  } else {
    console.log("切换至白天");
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color', contrastColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-background-color-contrast', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('--global-font-color', baseColor);
    document.getElementsByTagName('body')[0].style.setProperty('$global-font-color-contrast', contrastColor);
    themeStore.toggleTheme();
  }

}
</script>


<template>
  <span>
    <el-switch
        style="--el-switch-on-color: #2F2F2F; --el-switch-off-color: #F1F1F1"
        v-model="dayOrNight"
        active-text="晚上"
        inactive-text="白天"
        @change="changeBackground">
    </el-switch>
  </span>
</template>


<style scoped lang="scss">

</style>